<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell required title="手机号码"/>
      <van-field
        v-model="phone"
        type="number"
        name="phone"
        placeholder="输入您的手机号码"
        clearable
        :readonly="readonly"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="sms_code"
        name="sms_code"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="btn_disable">
          完成并提交报名资料
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import $ajax from 'axios'
import { mapState } from 'vuex'

export default {
  name: 'contact',
  data () {
    return {
      phone: '',
      sms_code: '',
      readonly: false,
      btn_disable: false
    }
  },
  methods: {
    onSubmit (e) {
      this.$store.dispatch('contact', {
        phone: this.phone,
        sms_code: this.sms_code
      })
      $ajax.post('api/v1/job_apply', {
        ...this.baseInfo
      }).then(function (res) {
        console.log(res)
      })
    }
  },
  computed: {
    ...mapState(['baseInfo'])
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
}
</style>
